<template>
  <div class="line">
    <span v-if="editing">
      <el-input v-model="input" size="small" placeholder="请输入内容"></el-input>
      <el-button size="small" type="text" @click="handleEdit">确认</el-button>
      <el-button size="small" type="text" @click="editing = false">取消</el-button></span
    >
    <span class="tag" @click="handleClick" v-else>
      {{ item.content }}

      <el-dropdown type="primary" @command="handleCommand" v-if="entry !== 'preview' && entry !== 'htmlpreview'">
        <i class="el-icon-more"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="change">修改</el-dropdown-item>
          <el-dropdown-item command="remove">删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </span>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import { scrollPageByData } from '@/utils/helpers'
import { mapGetters } from 'vuex'
import { removeKeyword } from '@/utils/plugins/pageContextmenu/menuitem/keyword'

export default {
  name: 'KeywordTag',
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      editing: false,
      input: ''
    }
  },
  computed: {
    ...mapGetters(['entry'])
  },
  methods: {
    handleCommand(command) {
      if (command === 'change') {
        this.editing = true
        this.input = this.item.content
        return
      }
      this.handleRemove(this.item)
    },
    handleClick(e) {
      if (e.target.nodeName === 'I') {
        return e.stopPropagation()
      }
      scrollPageByData({ dataId: this.item.id, dataType: 'keyword' })
    },
    getNode(id) {
      return tinymce.activeEditor.dom.select(`#tinymce>.page-wrapper span[data-id="${id}"]`)[0]
    },
    async handleEdit() {
      const newContent = this.input
      tinymce.activeEditor.dom.setAttribs(this.getNode(this.item.id), { 'data-content': newContent, title: newContent })
      this.$set(this.item, 'content', this.input)
      this.editing = false
    },
    handleRemove(item) {
      tinymce.activeEditor.windowManager.open({
        title: `此操作将删除内容的关键词, 是否继续?`,
        size: 'normal',
        body: {
          type: 'panel',
          items: []
        },
        buttons: [
          { type: 'cancel', name: 'cancel', text: '取消' },
          { type: 'submit', name: 'save', text: '确定', primary: true }
        ],
        initialData: {},
        onSubmit: async (e) => {
          removeKeyword(tinymce.activeEditor, this.getNode(this.item.id))
          e.close()
        }
      })
    }
  }
}
</script>

<style scoped>
.line {
  margin: 5px 0;
}
.tag {
  position: relative;
  background-color: #ecf5ff;
  display: inline-block;
  height: 32px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 12px;
  color: #409eff;
  border: 1px solid #d9ecff;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  cursor: pointer;
}
.el-icon-more {
  transform: rotate(90deg);
}
.el-icon-more:hover {
  cursor: pointer;
}
::v-deep .el-input--small .el-input__inner {
  max-width: 190px;
  margin-right: 5px;
  font-size: 12px;
}
::v-deep .el-button.el-button--text {
  border-color: transparent;
  color: #409eff;
  background: transparent;
  padding: 6px 0;
  margin-left: 5px;
}
</style>
